<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <template #header>
            <!--            <PieChart style="width: 1em; height: 1em; vertical-align: middle;"/>-->
            <span style="vertical-align: middle;">设备总览1</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="devicePie"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <template #header>
            <!--            <PieChart style="width: 1em; height: 1em; vertical-align: middle;"/>-->
            <span style="vertical-align: middle;">设备总览2</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="deviceBar"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script setup name="Visual">
import {getProjectInfo} from "@/api/visual/ammeter";
import {BarChart, PieChart} from 'echarts/charts'
import echarts from "@/utils/echartsUtil";
import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";

echarts.use([PieChart, BarChart])
const {proxy} = getCurrentInstance();

const devicePie = ref(null);
let devicePieChart
const deviceBar = ref(null);
let deviceBarChart

const updateChartOption = (chart, type, data) => chart.setOption({
  title: {
    text: '设备总览',
    subtext: 'knx设备',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: type,
      radius: '50%',
      data: data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

onMounted(() => {
  devicePieChart = echarts.init(devicePie.value, "macarons", {
    height: 420
  });
  const devicePieOption = {
    title: {
      text: '设备总览',
      subtext: 'knx设备',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '设备数量',
        type: 'pie',
        radius: '60%',
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  devicePieChart.setOption(devicePieOption)
  devicePieChart.on('click', (params)=>{
    console.log(params)
  })
  deviceBarChart = echarts.init(deviceBar.value, "macarons", {
    renderer: "svg",
    height: 420
  });
  const deviceBarOption = {
    xAxis: {
      data: [],
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: [],
        // showBackground: true,
        // backgroundStyle: {
        //   color: 'rgba(220, 220, 220, 0.8)'
        // },
        itemStyle: {
          barBorderRadius: 5,
          borderWidth: 1,
          borderType: 'solid',
          borderColor: '#73c0de',
          shadowColor: '#5470c6',
          shadowBlur: 3
        }
      }
    ]
  };
  deviceBarChart.setOption(deviceBarOption)
  // window.addEventListener("resize", ()=>{
  //   devicePieChart.resize();
  // })
  window.onresize = function () {
    devicePieChart.resize();
  }
})

onUnmounted(() => {
  echarts.dispose(devicePieChart)
})

function getList() {
  getProjectInfo().then(response => {
    const data = [
      {name: '场景', value: 1048},
      {name: '灯光', value: 735},
      {name: '开关', value: 580},
      {name: '探测器', value: 484},
      {name: '遮阳', value: 300},
      {name: '空调', value: 310},
      {name: '地暖', value: 130},
      {name: '新风', value: 220},
      {name: '传感器', value: 130},
    ]
    const devicePieData = []
    const deviceBarData = {
      xAxisData: [],
      data: []
    }
    data.forEach(({value, name}) => {
      console.log(value, name)
      devicePieData.push({value, name})
      deviceBarData.xAxisData.push(name)
      deviceBarData.data.push(value)
    })
    const devicePieOption = {
      title: {
        text: '设备总览',
        subtext: 'knx设备',
      },
      series: [
        {
          name: '设备数量',
          data: devicePieData
        }
      ]
    }
    devicePieChart.setOption(devicePieOption)

    const deviceBarOption = {
      xAxis: {
        data: deviceBarData.xAxisData,
      },
      yAxis: {},
      series: [
        {
          data: deviceBarData.data,
        }
      ]
    };
    deviceBarChart.setOption(deviceBarOption)
  })
}

getList();

</script>